<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div>数量：{{number}}
        <span><button @click="subNum">-</button><button @click="addNum">+</button></span>
    </div>
    <div>单价：{{price}}
        <span><button @click="subPri">-</button><button @click="addPri">+</button></span>
    </div>
    <div>7折价：{{price * 0.7}}</div>
    <div>7折总价：{{number * price * 0.7}}</div>
    <div>总价：{{number * price}}</div>
<!--    <input type="button" @click="changePrice" value="计算">-->
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            number: 0,
            price: 0
        },
        methods: {
            changePrice: function () {
                this.number++;
                this.price += 20;
            },
            addNum(){this.number++},
            subNum(){this.number--},
            addPri(){this.price++},
            subPri(){this.price--}
        }
    })
</script>
